<template>
  <draggable
    tag="ul"
    :list="basicComponents"
    v-bind="{
              group: { name: 'people', pull: 'clone', put: false },
              sort: false,
              ghostClass: 'ghost'
            }"
    :move="handleMove"
  >
    <li
      v-for="(item, index) in basicComponents"
      :key="index"
      class="fm-left-li-list"
      @dragstart="generateKey(index)"
    >
      <a>
        <svg v-if="item.icon" class="icon" aria-hidden="true">
          <use :xlink:href="`#${item.icon}`"></use>
        </svg>
        <span style="width: 150px;">{{ $locale(item.title) }}</span>
        <ych-icon class="drag-icon" type="drag"/>
      </a>
    </li>
  </draggable>
</template>

<script>

import {getAction} from '@/api/manage'
import Draggable from "vuedraggable";
import {randomString} from "../../../utils/util";
import YchConstant from '@/api/YchConstant'

export default {
  name: 'LayoutItem',
  components: {
    Draggable,
  },
  props: {
    groupId: {
      type: String,
      required: true
    },
    current: {
      type: Boolean,
      required: false,
      default: false
    },
  },
  data() {
    return {
      basicComponents: [],
      url: {
        listView: YchConstant.PREFIX_EFORM + '/manage/actAppView/listForDragLayout',
        listReport: YchConstant.PREFIX_EFORM + '/report/actReportWidget/listForDragLayout',
      }
    };
  },
  mounted() {
    this._loadComponents();
  },
  methods: {
    _loadComponents() {
      const tempId = randomString(32);
      this.basicComponents = [];
      const tabs = {
        type: 'tabs',
        title: 'm.eform.eformConstant.showType.tabs',
        icon: 'icon-zhage',
        x: 0,
        y: 0,
        w: 24,
        h: 40,
        i: tempId,
        key: tempId,
        refreshFlg: 0,
        tabs: [{
          title: 'm.eform.formDesign.label.Tab',
          key: randomString(32),
        }]
      }
      // 列表和树
      getAction(this.url.listView, {
        viewStatus: '1',
        formStatus: '1',
        groupId: this.groupId
      }).then((res) => {
        if (res.success) {
          const basicComponents = res.result.map((item, index) => {
            const type = item.viewType || 'form';
            const code = item.viewCode || item.formCode;
            const title = item.viewName || item.formName;
            let icon = "";
            if (type === 'table' || type === 'editableTable') {
              icon = 'icon-biaoge';
            } else if (type === 'tree') {
              icon = 'icon-qiapian';
            } else if (type === 'form') {
              icon = 'icon-edit';
            }
            const comp = {
              code: code,
              type: type,
              title: title,
              icon: icon,
              x: 0,
              y: 0,
              w: 24,
              h: 40,
              i: item.id,
              key: item.id,
              refreshFlg: 0,
            };
            if (type === 'table' || type === 'editableTable') {
              comp['relationStatus'] = 'open';
              comp['relationOpenFks'] = 'open';
              comp['showRules'] = 'show'
            } else if (type === 'tree') {
              comp['relationStatus'] = 'open';
              comp['relationOpenFks'] = 'open';
              comp['showRules'] = 'show'
            } else if (type === 'form') {
              comp['saveBut'] = 'auto';
              comp['formStatus'] = 'auto';
              comp['relationStatus'] = 'open';
              comp['relationOpenFks'] = 'open';
              comp['mainForm'] = 'Y';
              comp['flowForm'] = 'N';
            }
            return comp;
          })
          if (this.current) {
            this.basicComponents = [tabs, ...basicComponents, ...this.basicComponents]
          } else {
            this.basicComponents = [...basicComponents, ...this.basicComponents]
          }
        } else {
          this.messageUtil.warning(res.message)
        }
      })

      // 报表
      getAction(this.url.listReport, {
        groupId: this.groupId
      }).then((res) => {
        if (res.success) {
          const basicComponents = res.result.map((item, index) => {
            return {
              code: item.widgetCode,
              type: 'report',
              title: item.widgetName,
              icon: 'icon-menu',
              x: 0,
              y: 0,
              w: 24,
              h: 40,
              i: item.id,
              key: item.id,
              refreshFlg: 0,
            };
          })
          this.basicComponents = [...this.basicComponents, ...basicComponents]
        } else {
          this.messageUtil.warning(res.message)
        }
      })
    },
    handleMove() {
      return true;
    },
    generateKey(index) {
      const record = this.basicComponents[index];
      record.key = randomString(32);
      record.i = randomString(32);
    },
  }
}
</script>
